<template>
    <div>
        <!--dialog-->
        <el-dialog :title="$t('EditUser')" :visible.sync="editUserDialog" width="50%" :before-close="close">
            <el-form :model="userData" :rules="rules" ref="userData">
                <el-row :gutter="10">
                    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item :label="$t('username')" :label-width="formLabelWidth" prop="username">
                            <el-input size="small" v-model="userData.username" auto-complete="off" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('CreateTime')" :label-width="formLabelWidth" >
                            <el-input size="small"  v-model="userData.createTimestamp" auto-complete="off" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('last_upd_time')" :label-width="formLabelWidth" >
                            <el-input size="small" v-model="userData.lastUpdateTimestamp" auto-complete="off" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('last_login_time')" :label-width="formLabelWidth">
                            <el-input size="small"  v-model="userData.lastLoginTime" auto-complete="off" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('login_num')" :label-width="formLabelWidth">
                            <el-input size="small" v-model="userData.loginNum" auto-complete="off" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('selectRoles')" :label-width="formLabelWidth" prop="roleIds">
                            <el-select v-model="userData.roleIds" multiple :placeholder="$t('pleaseSelect')">
                                <el-option
                                    v-for="item in allRoles"
                                    :key="item.roleId"
                                    :label="item.roleName"
                                    :value="item.roleId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item :label="$t('userstatus')" :label-width="formLabelWidth" prop="radiotest">
                            <!--<el-radio-group v-model="userData.sysUserStatus">-->
                                <!--<el-radio label=1>正常</el-radio>-->
                                <!--<el-radio label=2>冻结</el-radio>-->
                                <label>{{$t('normal')}}<input type="radio" v-model="userData.sysUserStatus" value="1" ></label>
                                <label>{{$t('freeze')}}<input type="radio" v-model="userData.sysUserStatus" value="2"></label>
                            <!--</el-radio-group>-->
                        </el-form-item>
                        <el-form-item :label="$t('phone')" :label-width="formLabelWidth" prop="phone">
                            <el-input size="small"  v-model="userData.phone" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('email')" :label-width="formLabelWidth" prop="email">
                            <el-input size="small" v-model="userData.email" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('Remark')" :label-width="formLabelWidth" prop="userRemark">
                            <el-input size="small"  v-model="userData.userRemark" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('password')" :label-width="formLabelWidth" prop="password">
                            <el-input size="small" type="password"  v-model="userData.password" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('passwordAgain')" :label-width="formLabelWidth" prop="passwordAgain">
                            <el-input size="small" type="password"   v-model="userData.passwordAgain" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" align="center">
                <el-button size="small" type="primary" @click="updUser" v-text="$t('Modify')"></el-button>
                <el-button size="small" @click="close" v-text="$t('Cancel')"></el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        props : {
            editUserDialog: false,
            userData : {},
        },
        data() {
            var validatePass = (rule, value, callback) => {
                if(value != "" && value.length < 6) {
                    callback(new Error(this.$t('password_length_limit')));
                } else {
                    if (this.userData.passwordAgain !== '') {
                        this.$refs.userData.validateField('passwordAgain');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    if(this.userData.password != ''){
                        callback(new Error(this.$t('password_again_tip')));
                    }
                    callback();
                } else if (value !== this.userData.password) {
                    callback(new Error(this.$t('password_diff')));
                } else {
                    callback();
                }
            };
            var validateRoles = (rule, value, callback) => {
                if (value.length == 0) {
                    callback(new Error(this.$t('select_role_tip')));
                } else {
                    callback();
                }
            };
            return {
                allRoles :[],
                rules: {
                    password : [{required: true, validator : validatePass, trigger: 'blur' }],
                    passwordAgain : [{required: true, validator : validatePass2, trigger: 'blur' }],
                    roleIds : [{required: true, validator : validateRoles, trigger: 'blur' }],
                },
                formLabelWidth: '120px',
            }
        },

        methods: {
            close(){
                let vm = this
                vm.$refs.userData.resetFields()
                vm.$parent.editUser.editUserDialog = false
            },
            updUser(){
                let vm = this
                vm.$refs.userData.validate((valid) => {
                    if (valid) {
                        vm.$http
                            .post('sys/updataUser', {
                                user:JSON.stringify(vm.userData)
                            })
                            .then(function (response) {
                                if(response.data.result){
                                    vm.$message({
                                        message: vm.$t('Success'),
                                        type: 'success'
                                    });
                                    vm.close();
                                    vm.$parent.getUserTableData();
                                }else {
                                    vm.$message.error(vm.$t('Failed'));
                                }
                            }).catch(function (error) {
                            console.log(error)
                            })
                    } else {
                        return false;
                    }
                });
            },
            getRoleData() {
                let vm = this
                vm.$http
                    .get('sys/findAllRoles')
                    .then(function (response) {
                        vm.allRoles = response.data.result
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
        },
        created: function () {
            let vm = this
            vm.getRoleData();
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .el-dialog .el-input{
        width: 90%;
    }
    .el-dialog .el-select{
        width: 100%;
    }
</style>
